<template>
  <div class="app-container-add">
    <!-- 功能按钮 -->
    <el-row :gutter="10" class="button-wrap">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="mini" @click="handleReturn()">返回</el-button>
      </el-col>
    </el-row>
    <div class="main-content">
      <el-card class="calendar" shadow="never">
        <h3 class="pro-name">{{ proName }}</h3>
        <el-container>
          <el-main>
            <el-calendar v-model="currentTime" :first-day-of-week="7">
              <template slot="dateCell" slot-scope="{data}">
                <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)">
                  <svg-icon v-if="data.day === today" icon-class="today" class="today" />
                  <p class="content" :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.split('-').slice(1).join('-') }}
                    <svg-icon v-if="recorded.indexOf(data.day )>-1" class="record recorded" icon-class="SignIn" />
                    <svg-icon v-else-if="notRecored.indexOf(data.day )>-1" class="record notRecored" icon-class="SignIn" />
                    <svg-icon v-else-if="notRecoredAll.indexOf(data.day )>-1" class="record notRecoredAll" icon-class="SignIn" />
                    <svg-icon v-else icon-class="SignIn" class="record" />
                  </p>
                </div>
              </template>
            </el-calendar>
            <div class="lenged">
              <div>
                <i class="recorded" />
                <span>已记录</span>
              </div>
              <div>
                <i class="notRecored" />
                <span>未记录</span>
              </div>
              <div>
                <i class="notRecoredAll" />
                <span>未记录全</span>
              </div>
            </div>
          </el-main>
          <el-aside class="every-day-pic">
            <el-card shadow="never">
              <div slot="header" class="clearfix">
                <span>日常记录</span>
              </div>
              <div class="every-day-info">
                <div class="every-day-info-item">
                  <el-row v-for="(item,index) in everyDayRecord.val" :key="index" class="top">
                    <el-col :span="8">
                      <p class="title">
                        <span v-if="item.imgType === '0'">早上</span>
                        <span v-if="item.imgType === '1'">中午</span>
                        <span v-if="item.imgType === '2'">下午</span>
                      </p>
                    </el-col>
                    <el-col :span="16">
                      <p class="time">
                        <i class="el-icon-time" />
                        <span>{{ item.date }}</span>
                      </p>
                    </el-col>
                    <el-col :span="24">
                      <p class="info">{{ item.remark }}</p>
                    </el-col>
                    <el-col class="pics">
                      <previewImg v-if="everyDayRecord.time === nowDay" :img-id-list="item.fileIds" />
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-card>
          </el-aside>
        </el-container>
      </el-card>
    </div>
  </div>
</template>
<script>
// 图片上传/下载
import previewImg from '@/components/basicinfo/previewImg'
import { getRecordList } from '@/api/projectManage/projectData'
export default {
  components: {
    previewImg
  },
  data() {
    return {
      proName: '',
      everyDayRecord: [],
      currentTime: new Date(),
      recorded: [],
      notRecored: [],
      notRecoredAll: [],
      nowDay: ''
    }
  },
  computed: {
    today() {
      const dateTime = new Date()
      const year = dateTime.getFullYear()
      const month = dateTime.getMonth() + 1
      const day = dateTime.getDate()
      // 验证一位数还是两位数
      const formatNumber = n => {
        n = n.toString()
        return n[1] ? n : '0' + n
      }
      return [year, month, day].map(formatNumber).join('-')
    }
  },
  created() {
    this.$nextTick(() => {
      // 点击前一个月
      const prevBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(1)'
      )
      prevBtn.addEventListener('click', e => {
        const nowDate = new Date(this.currentTime)
        const month = nowDate.getMonth() + 1
        const year = nowDate.getFullYear()
        const { beginTime, endTime } = this.getMonthDay(year, month)
        // console.log(beginTime, endTime, '请求了...')
        this.getRecordList({ proId, beginTime, endTime }, beginTime)
      })

      // 点击下一个月
      const nextBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(3)'
      )
      nextBtn.addEventListener('click', () => {
        const nowDate = new Date(this.currentTime)
        const month = nowDate.getMonth() + 1
        const year = nowDate.getFullYear()
        const { beginTime, endTime } = this.getMonthDay(year, month)
        this.getRecordList({ proId, beginTime, endTime }, beginTime)
        // console.log(beginTime, endTime, '请求了...')
      })

      // 点击今天
      const todayBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(2)'
      )
      todayBtn.addEventListener('click', () => {
        const { beginTime, endTime } = this.getMonthDay()
        const time = this.getTime()
        this.getRecordList({ proId, beginTime, endTime }, time)
      })
    })
    const { proId, proName } = this.$route.query
    this.proName = proName
    const { beginTime, endTime } = this.getMonthDay()
    const time = this.getTime()
    this.getRecordList({ proId, beginTime, endTime }, time)
  },

  methods: {
    async getRecordList(params, time) {
      const { data } = await getRecordList(params)
      if (data.length) {
        data.forEach(item => {
          const { val, key } = item
          const year = key.substr(0, 4)
          const month = key.substr(4, 2)
          const day = key.substr(6, 2)
          const time = `${year}-${month}-${day}`
          if (val.length === 3) {
            this.recorded.push(time)
          } else if (val.length >= 2 || val.length <= 1) {
            this.notRecoredAll.push(time)
          } else {
            this.notRecored.push(time)
          }
        })
      }
      this.recordList = data
      // const time = this.getTime()
      this.calendarOnClick({ day: time })
    },
    // 获取当前时间
    getTime(type = 'nowMonth') {
      const nowDate = new Date()
      const year = nowDate.getFullYear()
      const month = (nowDate.getMonth() + 1).toString().padStart(2, 0)
      const day = nowDate.getDate().toString().padStart(2, 0)
      return `${year}-${month}-${day}`
    },
    // 点击日期块
    calendarOnClick(nowDay) {
      this.everyDayRecord = {}
      const record = this.recordList.find(item => {
        const { key } = item
        const year = key.substr(0, 4)
        const month = key.substr(4, 2)
        const day = key.substr(6, 2)
        const time = `${year}-${month}-${day}`
        this.nowDay = nowDay.day
        return time === nowDay.day
      })
      if (record) {
        const year = record.key.substr(0, 4)
        const month = record.key.substr(4, 2)
        const day = record.key.substr(6, 2)
        const time = `${year}-${month}-${day}`
        this.everyDayRecord.time = time
        this.everyDayRecord.val = record.val.map(item => {
          item.fileIds = item.appFiles.map(item => item.fileId)
          return item
        })
      } else {
        this.everyDayRecord = {}
      }
    },
    // 获取月份
    getMonthDay(year, month) {
      if (!year && !month) {
        const nowDate = new Date()
        month = (nowDate.getMonth() + 1)
        year = nowDate.getFullYear()
      }
      month = month.toString().padStart(2, 0)
      // 获取当月最后一天数补0
      const day = new Date(year, month, 0).getDate().toString().padStart(2, 0)
      return {
        beginTime: `${year}-${month}-${'1'.padStart(2, 0)}`,
        endTime: `${year}-${month}-${day}`
      }
    },
    // 返回
    handleReturn() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss">
  .calendar {
    .pro-name{
      margin: 0;
    }
    .el-card__header{
      font-size: 18px;
    }
    .el-main {
      padding: 0px;
      overflow: hidden;
      .el-card__body {
        padding: 0px;
      }
      .el-calendar__body{
        padding: 0px;
      }
      .el-calendar-table td.is-selected{
        border:1px solid #0a7fff;
      }
      .div-Calendar {
        text-align: center;
        position: relative;
        .today{
          position: absolute;
          right: 0px;
          top:0px;
          font-size: 20px;
        }
        .content{
          height: 70px;
          line-height: 70px;
          padding: 0;
          margin: 0;
          position: relative;
          .record{
            font-size: 28px;
            color: #ddd;
            position: absolute;
            right:0%;
            bottom:0%;
            &.recorded{
              color:#0a7fff;
            }
            &.notRecored{
              color: #ff2218;
            }
            &.notRecoredAll{
              color: #ff8706;
            }
          }
        }
      }
    }
    .every-day-pic{
      width: 40%!important;
      margin-left: 15px;
      .every-day-info{
        .every-day-info-item{
          margin-bottom: 15px;
          padding-bottom: 10px;
          border-bottom: 1px solid #eee;
          .top{
            p{
              padding: 0;
              margin: 0;
            }
            .title{
              font-size: 18px;
              color: #0a7fff;
            }
            .time{
              text-align: right;
              font-size: 16px;
              color: #666;
              .el-icon-time{
                margin-right: 5px;
              }
            }
            .info{
              margin: 10px 0;
              line-height: 18px;
              font-size: 14px;
            }
          }
          .pics{
            .el-image{
              border-radius: 10px;
            }
          }
          &:last-child{
            border: none;
            margin-bottom: 0px;
          }
        }

      }
    }

  }
  .lenged {
    margin-top: 5px;
    font-size: 14px;
    overflow: hidden;
    div {
      margin-top: 5px;
      margin-right: 10px;
      float: left;
    }
    i {
      display: inline-block;
      width: 30px;
      height: 15px;
      border-radius: 5px;
      margin-right: 10px;
      vertical-align: bottom;
    }
    .recorded {
      background: #0a7fff;
    }
    .notRecored {
      background: #ff2218;
    }
    .notRecoredAll {
      background: #ff8706;
    }
  }
  .el-carousel__container{
    height: 450px;
  }
</style>

